<template>
  <div class="bigcontainer">
    <div class="tab-container">
      <el-button type="primary" @click="handleClockIn" :circle="true">
        <div class="showtime">
          <span>上班打卡</span>
          <span> {{ this.timestr }}</span>
        </div>
      </el-button>
      <el-button type="success" @click="handleClockOut" :circle="true">
        <span>下班打卡</span>
        <span> {{ this.timestr }}</span>
      </el-button>
    </div>


    <h3>打卡记录</h3>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="empName" label="姓名">
      </el-table-column>
      <el-table-column prop="mounth" label="月份">
      </el-table-column>
      <el-table-column prop="checkinTime" label="上班打卡时间">
      </el-table-column>
      <el-table-column prop="checkoutTime" label="下班班打卡时间">
      </el-table-column>
    </el-table>
  </div>

</template>

<script>
import { clockIn, clockOut, getList, getUser } from '@/api/attendance';


export default {
  name: 'Section',
  data() {
    return {
      timestr: "20:10:11",
      tableData: []
    }
  },
  created() {
    getClockList();
  },
  mounted() {
    setInterval(() => {
      let date = new Date();
      let m = String(date.getMinutes()).length === 1 ? "0" + date.getMinutes() : date.getMinutes();
      let str = `${date.getHours()}:${m}:${date.getSeconds()}`;
      this.timestr = str;
    }, 1000);
    this.getClockList();
  },
  methods: {
    async getClockList() {
      let res = await getList();
      for (let i = 0; i < res.rows.length; i++) {
        let reslut = await getUser(res.rows[i].empNo);
        res.rows[i].empName = reslut.data.empName;
        res.rows[i].mounth = res.rows[i].date.substring(4,6);
      }
      console.log("----??",res.rows)
      this.tableData = res.rows
    },
    handleClockIn() {
      clockIn().then(res => {
        if (res.code == 200) {
          this.$message('上班打卡成功');
          this.getClockList();
        } else {
          this.$message('上班打卡失败');
        }
      })
    },
    handleClockOut() {
      clockOut().then(res => {
        if (res.code == 200) {
          this.$message('下班打卡成功');
          this.getClockList();

        } else {
          this.$message('下班打卡失败');
        }
      })
    }
  }

}
</script>

<style scoped>
.tab-container {
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.el-button {
  width: 150px;
  height: 150px;
}

.showtime {
  display: flex;
  flex-direction: column;
}

.showtime span {
  margin: 5px;
}
</style>